<template>
	<div class="single-result-show-area">
		<ve-pie :data="sentimentAnalyData" ref="sentimentAnaly"></ve-pie>
	</div>
</template>

<script>
export default {

	props: {
		showData: { type: Object 	}
	},

	watch: {
		showData: function (newValue, oldValue) {
			if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
				this.renderChart();
			}
		}
	},

	data: function () {
		return {
			sentimentAnalyData: {}
		}
	},

	methods: {

		// 渲染图形
		renderChart: function () {
			var data = { columns: ["sentimentType", "count"], rows: []};
			var obj = {};
			var res = this.showData.sentimentList;
			if (res && res.length) {
				for (var i = 0; i < res.length; i++) {
					if (!obj[res[i]["sentiment"]]) {
						obj[res[i]["sentiment"]] = { sentimentType: res[i]["sentiment"], count: 0 };
					}
					obj[res[i]["sentiment"]]["count"]++;
				}
				for (var j in obj) {
					data["rows"].push(obj[j]);
				}
				this.sentimentAnalyData = data;
				this.$refs[`sentimentAnaly`].echarts.resize();
			}
		}
	}
}
</script>

<style lang="less" scoped>
.single-result-show-area {
	width: 100%;
	height: calc(~'100% - 60px');
	padding-top: 30px;
	padding-bottom: 30px;
}
</style>
